<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动</title>
<link rel="stylesheet" href="../../assets/css/reset.css"/>
<style type="text/css">
body{ font:12px/1.5 tahoma,arial,'微软雅黑'; }
a{ color: #3E3E3E; }

.scroll-box{ position: relative; width:260px; margin:10px; padding:10px;}
.scroll-container{ position: relative; width:260px;height:170px; overflow: hidden; }
.scroll-container ul{ width:1000px; }
.scroll-container li{ float: left; width:260px;}
.scroll-container li img{ margin: 0 15px 20px; width: 230px; height: 110; }

a.scroll-left-btn{ position: absolute; width:10px; height:30px; top:50px; left:0px; background: url(images/arrows.png) no-repeat 0 -70px;}
a.scroll-right-btn{ position: absolute; width:10px; height:30px; top:50px; right:0px; background: url(images/arrows.png) no-repeat -23px -70px;}
a.scroll-left-btn:hover{ background-position: -34px -70px;}
a.scroll-right-btn:hover{ background-position: -57px -70px;}
</style>
</head>
<body>
	<h2>Demo</h2>
	<div class="gifts">
		<div id="scroll" class="scroll-box">
			<div class="scroll-container">
				<ul class="clearfix">
					<li>
						<a href=""><img src="http://bbs.self.com.cn/data/attachment/portal/201206/05/113811fcfa5cwalx4wczwy.jpg"/></a>
						<p>来自NFL联盟蓝篮球宝贝进行了一场拉拉队之间的对决赛，也吸引了大批分析的签名围观</p>
					</li>
					<li>
						<a href=""><img src="http://bbs.self.com.cn/data/attachment/portal/201206/05/114124dvpvpjzwv43k5w3e.jpg"/></a>
						<p>来自NFL联盟蓝篮球宝贝进行了一场拉拉队之间的对决赛，也吸引了大批分析的签名围观</p>
					</li>
					<li>
						<a href=""><img src="http://bbs.self.com.cn/data/attachment/portal/201206/05/11485647enmmbn3eecmbie.jpg"/></a>
						<p>来自NFL联盟蓝篮球宝贝进行了一场拉拉队之间的对决赛，也吸引了大批分析的签名围观</p>
					</li>
				</ul>
			</div>

			<a class="scroll-left-btn" href="javascript:void(0)"></a>
			<a class="scroll-right-btn" href="javascript:void(0)"></a>
		</div>
	</div>
    
	<script src='../../jquery/jquery-1.7.1.min.js'></script>
	<script src='jquery.switchable-2.0.min.js'></script>
	<script>
		var scroll = $('#scroll');
		var sLeftBtn = scroll.find('.scroll-left-btn');
		var sRightBtn = scroll.find('.scroll-right-btn');

		var scrollApi = scroll.switchable({
		    triggers: null,
		    putTriggers: 'insertBefore',
		    panels: 'li',
		    easing: 'ease-in-out',
		    effect: 'scrollLeft',
		    delay: 1,
		    steps: 1,    //步长
		    visible: 1,  //可视Li
		    end2end: true,
		    prev: sLeftBtn,
		    next: sRightBtn,
		    autoplay: true,
		    api: true
		});

		sLeftBtn.mouseenter(function(){
		   scrollApi.pause();
		});

		sRightBtn.mouseenter(function(){
		    scrollApi.pause();
		});

		sLeftBtn.mouseleave(function(){
		    scrollApi.play();
		});

		sRightBtn.mouseleave(function(){
		    scrollApi.play();
		});

	</script>
</body>
</html>
